<!--
padding不会撑开盒子的情况
    1）只设置width、或只设置height，此时的padding不会撑大盒子（确切说应该是：不会撑大另一个属性值）。
    2）子容器不设置width、height时，不会撑大盒子。
    注意【width: 100%;】也算是设置了宽度。

小结
    不手动设置宽、高时（也就是：默认内容自身的宽高、或继承来的宽高），padding不会撑大盒子；
    只要手动设置了宽、高，padding就一定会撑大盒子。
-->
<style>
    h4 {
        /* 1）只设置height，不设置width，则只会撑大height，不会撑大width */
        /* height: 200px;
        background: cyan; */

        /* w不变，但h变：1520*200 --》1520*240 */
        /* padding: 20px; */

        /* w不变，h也不变：1520*200 --》1520*200 */
        /* padding: 0 20px; */


        /* 2）只设置width，不设置height，则只会撑大width，不会撑大height */
        width: 100%;
        background: cyan;

        /* w变，h也变：1520*0 --》1560*40（超出100%后，宽出现了滑轮，高也会新增20*2px） */
        /* padding: 20px; */

        /* w不变，h变：1520*0 --》1520*40 */
        padding: 20px 0;
    }
    div {
        width: 300px;
        height: 300px;
        background: blue;
    }
    div p{
        /* 设置宽、高时，会撑大盒子 */
        /* width: 100%; */
        /* 没有设置宽、高时，不会撑大盒子 */
        padding: 100px;
        background: purple;
    }
</style>

<h4></h4>

<div>
    <p>标签p的内容</p>
</div>